<!--商品详情-->
<template>
  <div class="product">
    <div style="height: 2.5rem" v-if="!isMobile"></div>
    <div class="container product-frame">
      <div class="info-frame">
        <div class="banner-frame col-12 col-sm-12 col-md-7">
          <van-swipe
            class="my-swipe"
            @change="bannerChange"
            :initial-swipe="bannerIndex"
            :show-indicators="false"
          >
            <van-swipe-item
              v-for="(item, index) in productInfo.imgs"
              :key="index"
            >
              <el-image
                class="img"
                :src="bannerShowImg ? bannerShowImg : item"
                :preview-src-list="productInfo.imgs"
              >
              </el-image>
              <!-- <van-image
                class="img"
                fit="contain"
                :src="bannerShowImg ? bannerShowImg : item"
              /> -->
            </van-swipe-item>
            <template #indicator v-if="isMobile">
              <div
                class="custom-indicator"
                v-if="productInfo.imgs != undefined"
              >
                {{ bannerIndex + 1 }}/{{ productInfo.imgs.length }}
              </div>
            </template>
          </van-swipe>
          <div class="nav-frame" v-if="!isMobile">
            <div class="nav-panel" ref="navPanel">
              <div
                class="nav-fast"
                v-for="(item, index) in productInfo.imgs"
                :key="index"
                @click="bannerChange(index)"
              >
                <van-image
                  class="nav-img"
                  fit="contain"
                  lazy-load
                  :src="item"
                  :style="
                    index == bannerIndex
                      ? 'border: 1px solid #000;'
                      : 'border: 0px;'
                  "
                />
              </div>
            </div>
          </div>
        </div>
        <div class="info-panel col-12 col-sm-12 col-md-5">
          <div class="info-fast">
            <h1 class="title">
              {{ productInfo.title }}
            </h1>
            <div class="price">
              <h2>
                <span
                  style="margin-right: 0.5rem; color: red"
                  v-if="productInfo.discount_price"
                  >${{ productInfo.discount_price }}</span
                >
                <span
                  style="
                    text-decoration: line-through;
                    color: #676766;
                    font-size: 0.8rem;
                  "
                  >${{ productInfo.price }}</span
                >
              </h2>
              <div class="icon-panel ac-bg" @click="proCollection">
                <van-icon :name="isCollection ? 'like' : 'like-o'" />
              </div>
            </div>
            <van-rate
              color="#ffd21e"
              size="0.8rem"
              v-model="productInfo.stars"
              readonly
            />
            <div
              class="type-frame"
              v-for="(item1, index_1) in productInfo.product_option.props"
              :key="'it1' + index_1"
            >
              <h3 class="type-title">{{ item1.name }}:</h3>
              <div class="type-panel">
                <div
                  class="type-fast co-light ac-bg"
                  v-for="(item2, index_2) in item1.children"
                  :key="'it2' + index_2"
                  @click="selectAttribute(index_1, index_2)"
                  :style="
                    typeSelectArray[index_1] == index_2
                      ? 'border:1px solid #000 !important;'
                      : 'border:1px solid #c8c9cc;'
                  "
                >
                  <van-image
                    class="img"
                    v-if="item2.imgs.length > 0"
                    fit="cover"
                    lazy-load
                    :src="item2.imgs[0].url"
                  />
                  <span style="co-light;padding:0 0.3rem">{{
                    item2.name
                  }}</span>
                </div>
              </div>
            </div>
            <div class="qty-frame" v-if="productInfo.imgs != undefined">
              <span class="qty-title">QTY: </span>
              <div class="qty-panel">
                <van-stepper
                  class="qty-fast"
                  v-model="carform.number"
                  button-size="1.2rem"
                  :max="100"
                  disable-input
                />
              </div>
            </div>
            <div class="buy-frame" @click="addCart" @mouseover="buyOver">
              <span
                class="buy-label"
                :style="buyColorHide ? 'color:#323233' : 'color:#fff'"
                >ADD TO BAG</span
              >
              <div class="buy-panel buy1" ref="buy1"></div>
              <div class="buy-panel buy2" ref="buy2"></div>
            </div>
          </div>
        </div>
        <div
          class="tips-frame col-12 col-sm-12 col-md-7"
          :style="moreModal && !showModel ? 'height:14rem' : 'min-heght:10px'"
        >
          <h2 class="title-frame">Description</h2>
          <div v-if="productInfo.content" v-html="productInfo.content"></div>
          <div class="detail-modal" v-if="moreModal && !showModel">
            <div class="see-more" @click="showModel = true">
              <span class="more-frame">
                <i class="el-icon-arrow-down" color="#000"></i>
                <i
                  class="el-icon-arrow-down"
                  style="margin-top: -0.4rem"
                  color="#000"
                ></i>
              </span>
            </div>
          </div>
          <div
            class="see-more"
            style="margin-top: 1rem; transform: rotate(180deg)"
            @click="showModel = false"
            v-if="moreModal && showModel"
          >
            <span class="more-frame">
              <i class="el-icon-arrow-down" color="#000"></i><br />
              <i
                class="el-icon-arrow-down"
                style="margin-top: -0.4rem"
                color="#000"
              ></i>
            </span>
          </div>
        </div>
        <div class="reviews-frame col-12 col-sm-12 col-md-5">
          <h2 class="title-frame">Comment({{ proTotal }})</h2>
          <div class="reviews-me" v-if="!commentLoading">
            <div
              class="reviews-panel"
              v-for="(item, index) in commentList"
              :key="index"
            >
              <van-rate
                v-model="item.stars"
                size="0.7rem"
                color="#ffd21e"
                void-icon="star"
                void-color="#dcdcdc"
                style="margin-bottom: 0.7rem"
              />
              <div class="auth-frame">
                <span class="auth">{{ item.user.nick_name }}</span>
                <span class="time_">{{
                  item.created_at.substring(0, 10)
                }}</span>
              </div>
              <p class="reviews">
                {{ item.content }}
              </p>
              <div class="img-frame" v-if="item.file_id">
                <div
                  class="img-panel"
                  v-for="(file, index) in item.file_id"
                  :key="index"
                  @click="clickBanner(item.file_id)"
                >
                  <van-image fit="cover" lazy-load class="img" :src="file" />
                </div>
              </div>
            </div>
          </div>
          <Loading v-else />
          <Nodata
            tips="I want to write a review"
            v-if="commentList.length == 0 && !commentLoading"
          />
        </div>
        <van-pagination
          v-model="comment.page"
          :total-items="proTotal"
          :items-per-page="comment.page_size"
          :show-page-size="5"
          class="col-sm-12 col-md-8 col-lg-6 col-xl-4"
          v-if="proTotal > comment.page_size && !commentLoading"
          @change="pageChange"
          style="margin-top: 0.7rem"
        >
          <template #prev-text>
            <van-icon name="arrow-left" />
          </template>
          <template #next-text>
            <van-icon name="arrow" />
          </template>
          <template #page="{ text }">{{ text }}</template>
        </van-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import product from "./product.js";
export default {
  mixins: [product.mixin],
};
</script>
<style lang="less" scoped>
.see-more {
  width: 100%;
  cursor: pointer;
  line-height: 0px;
  margin-top: 12.5rem;
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: center;
  .more-frame {
    width: 1rem;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
  }
  .el-icon-arrow-down {
    color: #000 !important;
    font-size: 0.8rem;
    color: #888;
    font-weight: bold;
    font-family: "BTBlack";
  }
}
.detail-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  color: #01a9db;
  font-size: 16px;
  background-image: linear-gradient(
    rgba(248, 246, 246, 0) 20%,
    rgba(255, 255, 255, 0.9) 80%,
    rgba(255, 255, 255, 1) 10%
  );
  font-family: "Helvetica";
}
@import "product.less";
</style>